<template>
  <div class="theme-demo" :class="currentTheme">
    <header class="header">
      <h1>主题切换示例</h1>
      <div class="theme-switcher">
        <button 
          v-for="theme in themes" 
          :key="theme.name"
          :class="['theme-btn', { active: currentTheme === theme.name }]"
          @click="setTheme(theme.name)">
          {{ theme.label }}
        </button>
      </div>
    </header>

    <main class="main-content">
      <!-- 卡片组件 -->
      <div class="card">
        <h3>主题系统</h3>
        <p>这是一个基于CSS变量的主题切换系统示例。通过切换主题，可以动态改变整个应用的视觉风格。</p>
        <button class="primary-btn">主要按钮</button>
        <button class="secondary-btn">次要按钮</button>
      </div>

      <!-- 表单组件 -->
      <div class="form-container">
        <h3>表单示例</h3>
        <form @submit.prevent>
          <div class="form-group">
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label>密码</label>
            <input type="password" placeholder="请输入密码">
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox"> 记住我
            </label>
          </div>
          <button class="primary-btn" type="submit">提交</button>
        </form>
      </div>

      <!-- 列表组件 -->
      <div class="list-container">
        <h3>列表示例</h3>
        <ul class="feature-list">
          <li v-for="feature in features" :key="feature">
            {{ feature }}
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const themes = [
  { name: 'light', label: '浅色主题' },
  { name: 'dark', label: '深色主题' },
  { name: 'ocean', label: '海洋主题' }
]

const currentTheme = ref('light')
const features = [
  '支持多个预定义主题',
  '基于CSS变量实现',
  '平滑的过渡动画',
  '响应式设计',
  '可扩展的主题系统'
]

const setTheme = (theme) => {
  currentTheme.value = theme
}
</script>

<style>
/* 基础变量定义 */
:root {
  /* Light Theme (默认) */
  --primary-color: #4CAF50;
  --secondary-color: #2196F3;
  --background-color: #ffffff;
  --surface-color: #f5f5f5;
  --text-color: #333333;
  --text-secondary: #666666;
  --border-color: #dddddd;
}

/* Dark Theme */
.dark {
  --primary-color: #66BB6A;
  --secondary-color: #42A5F5;
  --background-color: #121212;
  --surface-color: #1E1E1E;
  --text-color: #FFFFFF;
  --text-secondary: #B0B0B0;
  --border-color: #333333;
}

/* Ocean Theme */
.ocean {
  --primary-color: #00BCD4;
  --secondary-color: #03A9F4;
  --background-color: #E3F2FD;
  --surface-color: #FFFFFF;
  --text-color: #01579B;
  --text-secondary: #0277BD;
  --border-color: #B3E5FC;
}
</style>

<style scoped>
.theme-demo {
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

.header {
  padding: 20px;
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.theme-switcher {
  margin: 20px 0;
}

.theme-btn {
  margin: 0 8px;
  padding: 8px 16px;
  background-color: var(--surface-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

.theme-btn.active {
  background-color: var(--primary-color);
  color: white;
}

.main-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
}

.primary-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin: 8px;
  cursor: pointer;
}

.secondary-btn {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin: 8px;
  cursor: pointer;
}

.form-container {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-color);
  color: var(--text-color);
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.feature-list li:last-child {
  border-bottom: none;
}
</style>
